<!--
 * @Author: your name
 * @Date: 2021-03-26 19:20:23
 * @LastEditTime: 2021-06-18 16:06:36
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /medicine-web/src/views/index.vue
-->
<template>
  <div class="main-container">
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh" :loading-text="' '" style="height: 100%">
      <van-list
        v-model="loadingList"
        :finished="finished"
        finished-text=" "
        @load="onLoad"
      >
        <div class="main-tab-title">
          <van-tabs :swipe-threshold="3" v-model="activeName" style="width: calc(100% - 60px)" animated>
            <van-tab v-for="item in titleArray" :key="item.id">
              <template #title>
                <span :style="activeName+1 == item.id ? 'color: #ee0a24' : 'color: #333333'">{{item.type_name}}</span>
              </template>
            </van-tab>
          </van-tabs>
          <img :src="qrcodeUrl" alt="" style="width: 32px; height: 33px;" @click="showPopup">
        </div>
        <div class="main-tab-search">
          <van-search :shape="'round'" v-model="searchValue" placeholder="大家都在搜索新中国70周年..." @search="onSearch" />
        </div>
        <div class="main-tab-grid">
          <van-grid :column-num="2" :gutter="17" :center="false">
            <van-grid-item v-for="item in gridArray" :key="item.id" @click="$router.push({ path: '/detail', query: { id: item.id } })">
              <GridVideoItem :gridItemData="item" />
            </van-grid-item>
          </van-grid>
        </div>
      </van-list>
    </van-pull-refresh>
    <!-- 显示放大的二维码 -->
    <van-popup v-model="showQrcode" :round="true">
      <div class="qrcode-container">
        <img :src="qrcodeUrl" alt="" style="width: 120px; height: 120px;">
        <div class="qrcode-tips">请将二维码截图分享给其他人</div>
      </div>
    </van-popup>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { Toast } from 'vant';
import GridVideoItem from '@/components/GridVideoItem/index'
import { getCookie } from '@/utils/auth.js';
export default {
  name: 'mainPage',
  components: {
    GridVideoItem,
  },
  mounted () {
    // this.fetchData(1);
  },
  data() {
    return {
      qrcodeUrl: require('@/assets/image/qrcode.png'),
      loadingList: false,
      finished: false,
      isLoading: false,
      activeName: 0,
      oldActiveName: 0,
      titleArray: [],
      searchValue: '',
      gridArray: [],
      params: { openid: getCookie('openid'), keyword: '', page: 1, limit: 10, video_type_id: 1 },
      showQrcode: false,
    }
  },
  methods: {
    showPopup () {
      this.showQrcode = true;
    },
    // 分页  changeActiveFlag 防止切换时， 还能渲染上一个请求返回的数据
    fetchData (page, changeActiveFlag) {
      if (page == 1 || changeActiveFlag == true) { // changeActiveFlag 防止切换时， 还能渲染上一个请求返回的数据
        this.params.page = 1;
        this.gridArray = [];
      }
      this.$action('getVideoList', this.params).then((res) => {
        if (res.data.last != 0) {
          this.finished = false;
        }
        if (page == 1 || changeActiveFlag == true) { // changeActiveFlag 防止切换时， 还能渲染上一个请求返回的数据
          this.params.page = 1;
          this.gridArray = [];
        }
        this.qrcodeUrl = this.$uploadUrl + res.data.qr_code
        if (this.oldActiveName == this.activeName) { // 防止切换时， 还能渲染上一个请求返回的数据
          this.gridArray = this.gridArray.concat(res.data.video_list)
        }
        this.titleArray = res.data.video_type_list.reverse();
        this.loadingList = false;
        this.params.page++;
        if (res.data.last == 0) {
          this.finished = true;
        }
        if (page == 1) {
          this.isLoading = false;
        }
      })
    },
    onSearch (val) {
      this.params.keyword = val;
      this.fetchData(1);
    },
    onRefresh() {
      this.fetchData(1);
    },
    onLoad () {
      this.fetchData();
    }
  },
  computed: {
    ...mapGetters({})
  },
  watch: {
    activeName(val, old) {
      this.oldActiveName = val; // 防止切换时， 还能渲染上一个请求返回的数据 与 changeActiveFlag 一样 双保险
      this.params.page = 1;
      this.params.video_type_id = val + 1;
      this.fetchData(1, true)
    }
  }
}
</script>
<style lang="scss" scoped>
@import '~@/assets/styles/flex.scss';
.main-container {
  padding: 13px 17px 18px 17px;
  // min-height: 1137px;
  // overflow-y: scroll;
  .main-tab-title {
    @include flex-def;
    @include flex-cCenter;
    @include flex-zBetween;
  }
  .main-tab-search {
    margin-top: 19px;
  }
  .main-tab-grid {
    margin-top: 29px;
    min-height: calc(100vh - 400px);
  }
  .qrcode-container {
    padding: 37px 69px 33px 65px;
    text-align: center;
  }
  .qrcode-tips {
    margin-top: 29px;
    color: #999999;
    font-size: 15px;
    white-space: nowrap;
  }
}
</style>